<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>location</title>
</head>

<body>
  <div>
    <input type="button" value="ASSION" onclick="assignTo()">
    <input type="button" value="RELOAD" onclick="reloadTo()">
    <input type="button" value="REPLACE" onclick="replaceTo()">
  </div>
  <script>
    // 既 是 window 的 属 性 ， 也 是 document 的 属 性 
    // 也 就 是 说 ，window.location 和 document.location 指向同一个对象

    //  location.hash "#contents" URL 散列值（井号后跟零或多个字符），如果没有则为空字符串
    //  location.host "www.wrox.com:80" 服务器名及端口号
    //  location.hostname "www.wrox.com" 服务器名
    //  location.href "http://www.wrox.com:80/WileyCDA/?q=javascript#contents"
    //  当前加载页面的完整URL。location 的 toString()
    //  方法返回这个值
    //  location.pathname "/WileyCDA/" URL 中的路径和（或）文件名
    //  location.port "80" 请求的端口。如果 URL 中没有端口，则返回空字符串
    //  location.protocol "http:" 页面使用的协议。通常是"http:"或"https:"
    //  location.username "foouser" 域名前指定的用户名
    //  location.password "barpassword" 域名前指定的密码
    //  location.origin "http://www.wrox.com" URL 的源地址。只读

    //  location.search "?q=javascript" URL 的查询字符串。这个字符串以问号开头
    console.log("hash: " + location.hash);
    console.log("host: " + location.host);

    // 解析
    // http://localhost:5500/02JS%E5%AD%A6%E4%B9%A0/09BOM%E5%85%83%E7%B4%A0/02location%E5%AF%B9%E8%B1%A1.html?name=jaesun&password=123
    // 返回了从问号开始直到 URL 末尾的所有内容，但没有办法逐个访问每个查询参数。
    //   下面的函数解析了查询字符串，并返回一个以每个查询参数为属性的对象：
    let getQueryStringArgs = function () {
      // 取得没有开头问号的查询字符串
      let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        // 保存数据的对象
        args = {};
      // 把每个参数添加到 args 对象
      let keyValues = qs.split("&"); // [name=jaesun,password=123]
      console.log(keyValues);
      // items 为 二维数组 // [[name, jaesun], [password, 123]]
      let items = keyValues.map(kv => kv.split("="))
      console.log(items);
      for (let item of items) {
        let name = decodeURIComponent(item[0]),
        value = decodeURIComponent(item[1]);
        if (name.length) {
          args[name] = value;
        }
      }
      return args;
    }
     console.log(getQueryStringArgs());

    /* URLSearchParams 
      let qs = "?q=javascript&num=10";
      let searchParams = new URLSearchParams(qs);
      alert(searchParams.toString()); // " q=javascript&num=10"
      searchParams.has("num"); // true
      searchParams.get("num"); // 10
      searchParams.set("page", "3");
      alert(searchParams.toString()); // " q=javascript&num=10&page=3"
      searchParams.delete("q");
      alert(searchParams.toString()); // " num=10&page=3"
      大多数支持 URLSearchParams 的浏览器也支持将 URLSearchParams 的实例用作可迭代对象：
      let qs = "?q=javascript&num=10";
      let searchParams = new URLSearchParams(qs);
      for (let param of searchParams) {
      console.log(param);
    }
    // ["q", "javascript"]
    // ["num", "10"]
*/

  // assion() 
  // 跳转到新页面，会产生历史记录 当用户单击“后退”按钮时，就会导航到前一个页面
  function assignTo() {
    location.assign("https://www.baidu.com");
  }

  // 替换为新页面，不会产生历史记录，不能通过后退到前一个页面
  function replaceTo() {
    location.replace("https://www.baidu.com")
  }
  // 刷新当前页面
  function reloadTo() {
    //【参数 true 是从服务器重载页面】
    location.reload()
  }

  </script>
</body>

</html>